import {MyNavBar} from '@/components'
import {_getLeaseDetail} from './store'
import './index.less'
import {useDetailHook} from '@/hooks'
import {queryString, timer} from '@/utils'
import {Toast} from 'antd-mobile'
import {history} from 'umi'

function LeaseDetail() {
  const id = queryString('id')

  if (!id) {
    Toast.fail('参数不正确')
    history.goBack()
  }

  const {detailData, loading} = useDetailHook({func: _getLeaseDetail.bind(null, id)})

  const renderStatus = (val) => {
    if (val == 1) {
      return <div className='status yellow'>未生效</div>
    } else if (val == 2) {
      return <div className='status red'>已过期</div>
    } else if (val == 3) {
      return <div className='status green'>生效中</div>
    }
  }

  return (
    <div>
      <MyNavBar title='预约详情'/>
      {!loading && <div className='leaseDetail'>
        <div className='appointment-info'>
          <div className='left'>
            <div className='info'>
              <span className='label'>开始时间：</span>
              <span
                className='value'>{timer(detailData?.startTime)}</span>
            </div>
            <div className='info'>
              <span className='label'>结束时间：</span>
              <span className='value'>{timer(detailData?.endTime)}</span>
            </div>
            <div className='info'>
              <span className='label'>发起时间：</span>
              <span className='value'>{timer(detailData?.createdAt)}</span>
            </div>
          </div>
          {renderStatus(detailData?.status)}
        </div>
        <div className='appointment-info'>
          <div className='title'>房东信息</div>
          <div className='header' onClick={(e) => {
            e.stopPropagation()
            history.push({pathname: '/user/userDetail', query: {id: detailData?.house?.oid}})
          }}>
            <img src={detailData?.house?.Owner?.userInfo?.avatar || require('@/assets/user.png')}/>
            <span
              className='reply-nickname'>{detailData?.house?.Owner?.userInfo?.firstName}{detailData?.house?.Owner?.userInfo?.secondName}</span>
          </div>
          <div className='info'>
            <span className='label'>用户昵称：</span>
            <span
              className='value'>{detailData?.house?.Owner?.nickName}</span>
          </div>
          <div className='info'>
            <span className='label'>用户名称：</span>
            <span
              className='value'>{detailData?.house?.Owner?.userName}</span>
          </div>
          <div className='info'>
            <span className='label'>注册时间：</span>
            <span
              className='value'>{timer(detailData?.house?.Owner?.createdAt)}</span>
          </div>
          <div className='info'>
            <span className='label'>家庭住址：</span>
            <span
              className='value'>{detailData?.house?.Owner?.userInfo?.address}</span>
          </div>
          <div className='info'>
            <span className='label'>个人描述：</span>
            <span
              className='value'>{detailData?.house?.Owner?.userInfo?.description}</span>
          </div>
        </div>
        <div className='appointment-info'>
          <div className='title'>房屋信息</div>
          {detailData?.house?.houseInfo?.pictures && <div className='imgList'>
            {detailData?.house?.houseInfo?.pictures.split('|').map(item => (
              <img key={item} src={item}/>
            ))}
          </div>}
          <div className='info'>
            <span className='label'>房屋标题：</span>
            <span
              className='value'>{detailData?.house?.name}</span>
          </div>
          <div className='info'>
            <span className='label'>房屋地址：</span>
            <span
              className='value'>{detailData?.house?.address}</span>
          </div>
          <div className='info'>
            <span className='label'>房屋租金：</span>
            <span
              className='value'>{detailData?.house?.rent}</span>
          </div>
          <div className='info'>
            <span className='label'>发布时间：</span>
            <span
              className='value'>{timer(detailData?.house?.createdAt)}</span>
          </div>
          <div className='info'>
            <span className='label'>房屋描述：</span>
            <span
              className='value'>{detailData?.house?.description}</span>
          </div>
        </div>
      </div>}
    </div>
  )
}

export default LeaseDetail
